<script setup lang="ts">
definePage({
  name: 'demo-guard',
  style: {
    navigationBarTitleText: '导航守卫演示',
  },
})

const router = useRouter()

function goBack() {
  router.back()
}

// 演示权限拦截
function handleBeforeEach() {
  router.push({
    name: 'demo-protected',
  })
}

// 跳转到afterEach演示页面
function demoAfterEachPage() {
  router.push('/pages/router/demo-aftereach')
}
</script>

<template>
  <view class="page-wrapper">
    <!-- 头部 -->
    <view class="header-container">
      <view class="header-content">
        <view class="header-icon">
          🛡️
        </view>
        <view class="header-title">
          导航守卫演示
        </view>
        <view class="header-subtitle">
          演示 beforeEach 和 afterEach 守卫功能
        </view>
      </view>
    </view>

    <!-- 守卫演示 -->
    <demo-block title="守卫演示" transparent>
      <view class="guard-cards">
        <view class="guard-card">
          <view class="guard-title">
            前置导航守卫拦截
          </view>
          <view class="guard-subtitle">
            跳转前交互，可以拦截导航
          </view>
          <wd-button type="error" block @click="handleBeforeEach">
            📊 beforeEach 演示
          </wd-button>
        </view>

        <view class="guard-card">
          <view class="guard-title">
            后置导航钩子演示
          </view>
          <view class="guard-subtitle">
            跳转到专门的 afterEach 演示页面，体验页面统计、埋点上报等功能
          </view>
          <wd-button type="success" block @click="demoAfterEachPage">
            📊 afterEach 演示
          </wd-button>
        </view>
      </view>
    </demo-block>

    <!-- 操作按钮 -->
    <demo-block title="导航" transparent>
      <view class="navigation-buttons">
        <wd-button type="warning" block @click="goBack">
          返回上一页
        </wd-button>
      </view>
    </demo-block>
  </view>
</template>

<style lang="scss" scoped>
.page-wrapper {
  padding: 12px 0;
  background-color: #f7f7f7;
}

.dark .page-wrapper {
  background-color: var(--wot-dark-background);
}

.header-container {
  margin: 0 12px 12px;
}

.header-content {
  padding: 24px 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 12px;
}

.dark .header-content {
  background-color: var(--wot-dark-background2);
}

.header-icon {
  margin-bottom: 12px;
  font-size: 32px;
}

.header-title {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.dark .header-title {
  color: var(--wot-dark-color);
}

.header-subtitle {
  font-size: 14px;
  color: #666;
}

.dark .header-subtitle {
  color: var(--wot-dark-color2);
}

.guard-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guard-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.dark .guard-card {
  background-color: var(--wot-dark-background2);
}

.guard-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dark .guard-title {
  color: var(--wot-dark-color);
}

.guard-subtitle {
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
}

.dark .guard-subtitle {
  color: var(--wot-dark-color2);
}

.navigation-buttons {
  padding: 0 12px;
}
</style>
